<!--
 * @FileDescription: 堆场内容
 * @Author: 祝小文
 * @Date: 2022-09-28 14:06
-->
<script setup lang="ts">
import { emitter } from '@/composables'
import { ElMessage } from 'element-plus'
import _ from 'lodash'
import { Search } from '@element-plus/icons-vue'
import SecondaryConfirm from '@/components/SecondaryConfirm/index.vue'
import { featureClick, delMapFactorInfo, flyToLxOrCjid } from '@/utils/common/index'
import { insertOrUpdateDcxx, querySearchInfo } from '@/service/api'

const chemicalStore = useChemicalStore()
const yard = chemicalStore.productionStorage.yard

const emit = defineEmits(['getCjInfo'])

//获取企业id
const qyId = computed(() => {
  return chemicalStore.qyInfo.id
})

const input = ref('')
const yardList = ref([])

//搜索功能(300毫秒防抖)
const inputSearch = _.debounce((val: any) => {
  const params = {
    menuCode: 'dc',
    key: val,
    qyid: qyId.value,
  }
  querySearchInfo(params).then((res: any) => {
    yardList.value = res
  })
}, 300)

//堆场 删除数据/删除地图要素 确认
const secondaryConfirmSave = (type: any, typeCode: any) => {
  const item: any = chemicalStore.secondaryConfirmInfo.data

  //删除地图要素数据
  if (type === 'delMapData') {
    if (typeCode === 'dc') {
      delMapFactorInfo(item, 'scrollWall')
    }
  }
  //删除数据
  else if (type === 'delData') {
    if (typeCode === 'dc') {
      const params = { id: item.id, qyid: item.qyid, sfyx: 0 }
      insertOrUpdateDcxx(params)
        .then((res: any) => {
          emitter.emit('tabLeft_refreshData') //更新左侧tab统计数量

          //删除地图要素
          window.GScrollWall.removeByName(item.id)

          ElMessage.success('堆场删除成功')
          loadYardData()
        })
        .catch((err: any) => {
          ElMessage.error('堆场删除失败')
        })
    }
  }
}

/** ---------- 堆场相关方法 Strat ---------- */
//加载堆场数据
const loadYardData = () => {
  const params = {
    menuCode: 'dc',
    qyid: qyId.value,
  }
  querySearchInfo(params).then((res: any) => {
    yardList.value = res
  })
}
loadYardData()

//新增堆场
const addYardClick = (item: any) => {
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  emit('getCjInfo', { cjId: null, fid: null, lx: 'add' })
  yard.addYardShow = true
}
//删除堆场
const delYardClick = (item: any) => {
  chemicalStore.secondaryConfirmInfo = {
    show: true,
    text: '是否确定删除堆场',
    type: 'delData',
    typeCode: 'dc',
    data: item,
  }
}
//修改堆场
const updateYardClick = (item: any) => {
  chemicalStore.closeAllPSDialog() //关闭全部弹窗
  emit('getCjInfo', { cjId: item.id, fid: null, lx: 'edit' })
  yard.addYardShow = true
}

//堆场上图
const addMapYardClick = (item: any) => {
  featureClick({
    id: item.id,
    parentName: item.id,
    MapFactorType: 'scrollWall',
    MapFactorName: '堆场',
    bzlx: '11',
    text: item.mc,
    attribute: item,
  })
}

//堆场地图要素删除
const delMapYardClick = (item: any) => {
  chemicalStore.secondaryConfirmInfo = {
    show: true,
    text: '是否确定删除该堆场地图要素',
    type: 'delMapData',
    typeCode: 'dc',
    data: item,
  }
}

//堆场选中事件
const yardActiveIndex = ref(0)
const activeYardClick = (item: any) => {
  flyToLxOrCjid('scrollWall', item.id)
  yardActiveIndex.value = item.id
}
/** ---------- 堆场相关方法 End ---------- */

/** 监听是否需要刷新数据 */
emitter.on('dc_refreshData', () => {
  //如果输入框中有值
  if (input.value) {
    inputSearch(input.value)
    return
  }
  loadYardData()
})

/** 离开时销毁改事件 */
onUnmounted(() => {
  emitter.off('dc_refreshData')
})
</script>

<template>
  <div class="yard-container">
    <el-input
      v-model="input"
      placeholder="请输入编号或名称"
      size="large"
      :suffix-icon="Search"
      class="card-search card-bck-color"
      @input="inputSearch"
    />

    <div class="yard-main">
      <div
        v-for="(item, index) in yardList"
        :key="index"
        class="yard-card"
        :class="{ 'yard-active': item.id === yardActiveIndex }"
        @click="activeYardClick(item)"
      >
        <div style="display: flex; align-items: center">
          <i></i>
          <span class="single-line-text-exceeds" style="width: 260px" :title="item.mc">{{
            item.mc
          }}</span>
        </div>
        <div class="card-operation-btn">
          <!-- 堆场数据修改 -->
          <i title="编辑表单" @click.stop="updateYardClick(item)"></i>

          <!-- 堆场地图要素上图 -->
          <i
            v-if="item.sfbh === 0"
            title="标注"
            class="map-add"
            @click.stop="addMapYardClick(item)"
          ></i>
          <!-- 堆场地图要素删除 -->
          <i v-else title="删除标注" class="map-delete" @click.stop="delMapYardClick(item)"></i>

          <!-- 堆场数据删除 -->
          <i title="删除数据" @click.stop="delYardClick(item)"></i>
        </div>
      </div>
    </div>

    <div class="card-footer" @click="addYardClick">
      <i></i>
      <span>新增堆场</span>
    </div>
  </div>

  <!-- 删除数据二次确认弹窗 -->
  <SecondaryConfirm @secondaryConfirmSave="secondaryConfirmSave" />
</template>

<style lang="less" scoped>
.yard-active {
  border: 1px solid #02979b !important;
  background: rgba(2, 151, 155, 0.4) !important;
}

.yard-container {
  height: 100%;
  .yard-main {
    height: calc(100% - 100px);
    overflow: auto;

    .yard-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      line-height: 50px;
      padding-left: 10px;
      padding-right: 15px;
      margin-bottom: 10px;
      background: rgba(1, 7, 17, 0.8);
      border-radius: 10px;
      cursor: pointer;

      & > div:nth-child(1) {
        i {
          display: inline-block;
          width: 32px;
          height: 32px;
          margin-top: -5px;
          margin-right: 2px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-image: url(@/assets/image/ProductionStorage/dc-icon.png);
          vertical-align: middle;
        }
      }
    }
    .yard-card:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
